<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="one"><label for="one">苹果</label>
    <input type="checkbox" id="two"><label for="two">香蕉</label>
    <input type="checkbox" id="three"><label for="three">橘子</label>
    <input type="checkbox" id="four"><label for="four">葡萄</label>
    <input type="checkbox" id="five"><label for="five">桃子</label>
    <input type="checkbox" id="six"><label for="six">西瓜</label>
    <input type="checkbox" id="seven"><label for="seven">李子</label>
    <input type="checkbox" id="eight"><label for="eight">荔枝</label>

    <button id="all">全选</button>
    <button id="cancel">全不选</button>
    <button id="other">反选</button>

    <script>
        let input=document.getElementsByTagName("input");
        document.body.onclick=function(){
            // 全选
            if(event.target.id=="all"){
                for(let i=0;i<input.length;i++){
                    input[i].checked=true;
                }

            }
             // 全不选
             if(event.target.id=="cancel"){
                for(let i=0;i<input.length;i++){
                    input[i].checked=false;
                }

            }
            // 返选
            if(event.target.id=="other"){
                for(let i=0;i<input.length;i++){
                    if(input[i].checked){
                        input[i].checked=false;
                    }else{
                        input[i].checked=true;
                    }
                }

            }
        }
    </script>
</body>
</html>